<template>
  <div class="bg">
    <!-- 导航栏 -->
    <div class="nav">
      <!-- 导航栏顶部 -->
      <div class="top">
        <el-form ref="form" :model="form" label-width="0.8rem">
          <el-form-item label="采购标题">
            <el-input @keyup="false" :key="keyvalue" v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button @click="inquire">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <button class="navButton" @click="check">发布采购</button>
    </div>

    <!-- 采购列表 -->
    <div class="list">
      <div class="title">采购列表</div>
      <ul class="subheading">
        <li
          v-for="(item, index) in subheadingList"
          :key="index"
          :class="{ active: upClick == index }"
          @click="toPage(index)"
        >
          {{ item.title }}（{{ item.count }}）
        </li>
      </ul>
      <div class="line"></div>

      <!-- 正在采购 -->
      <div class="apply_table">
        <div class="apply_table_column">
          <div
            class="apply_table_title"
            v-for="(item, index) in tableColumn"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
        <el-divider></el-divider>
        <div class="result" v-if="tableData.length > 0">
          <div
            class="apply_table_info"
            v-for="(item, index) in tableData"
            :key="index"
            @mouseover="showBtn(item)"
            @mouseout="hideBtn(item)"
          >
            <div class="apply_info_box" :class="{ isBlueClass: item.show }">
              <!-- <div class="apply_state">采购</div> -->
              <div class="apply_info_text">{{ item.productName }}</div>
              <div class="apply_info_text">
                {{ plastic[item.purchasingLabel] }}
              </div>
              <div class="apply_info_text">{{ item.purchaseAmount }}吨</div>
              <div class="apply_info_text">
                ￥{{ item.intentionalPrice }}/吨
              </div>
              <div class="apply_info_text">
                {{ item.createdTime.substr(0, 10) }}
              </div>
              <div class="apply_info_text">
                {{ subheadingList[item.purchasingStatus].title }}
              </div>
              <div class="apply_info_btn" v-show="item.show">
                <button class="btn_check" @click="editPurchase(index, 1)">
                  查看
                </button>
                <button class="btn_edit" @click="editPurchase(index, 2)">
                  编辑
                </button>
                <button class="btn_del" @click="delPop(index)">删除</button>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
        <div class="noResult" v-else>暂无相关数据</div>
      </div>

      <!-- 删除信息 -->
      <el-dialog
        title="提示"
        :visible.sync="delDialog"
        width="5.71rem"
        center
        class="del_dialog"
      >
        <span>是否删除此条信息</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancalPop">取消</el-button>
          <el-button type="primary" @click="deletePurchasing">确定</el-button>
        </span>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        v-if="tableData.length > 0"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  created() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
    this.getPurchasingList();
  },
  mounted() {
    let info = JSON.parse(sessionStorage.getItem("userInfo"));
    this.userInfo = info;
  },

  data() {
    return {
      keyvalue:Date.now(),
      plastic: ["塑胶原料", "改性塑料", "再生塑料", "破碎料", "废塑料"],
      subheadingList: [
        { title: "正在采购", count: "" },
        // { title: "采购完成", count: "0" },
      ],
      tableColumn: [
        "采购标题",
        "分类",
        "数量",
        "价格",
        "发布时间",
        "状态",
        "操作",
      ],
      tableData: [],
      upClick: 0,
      form: {
        name: "",
      },
      options: [
        { value: "全部" },
        { value: "正在采购" },
        { value: "采购完成" },
      ],
      value: "",
      delDialog: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      userInfo: {},
      delIndex: -1,
      isFind: false,
    };
  },
  methods: {
    cancalPop() {
      this.delDialog = false;
      this.delIndex = -1;
    },
    delPop(index) {
      this.delDialog = true;
      this.delIndex = index;
    },
    // 查询
    inquire() {
      this.pageNo = 1;
      if (this.form.name !== "") {
        //判断有无搜索词
        this.isFind = true;
      } else {
        this.isFind = false;
      }
      this.getPurchasingList();
    },
    // 删除采购
    async deletePurchasing() {
      let id = this.tableData[this.delIndex].id;
      let res = await this.$apiFun.deletePurchasing({
        id,
      });
      this.delDialog = false;
      if (res.code == 200) {
        this.$message({
          type: "success",
          duration: 1500,
          message: "删除成功",
        });
        this.getPurchasingList();
      } else {
        this.$message({
          type: "success",
          duration: 1500,
          message: "删除失败",
        });
      }
    },
    // 采购列表
    async getPurchasingList() {
      let params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        purchasingStatus: Number(this.upClick),
        memberId: this.userInfo.id,
      };
      if (this.isFind == true) {
        params.condition = this.form.name;
      }
      let res = await this.$apiFun.getPurchasingList(params);
      this.tableData = res.result.rows.map((item) => {
        return { ...item, show: false };
      });
      this.total = Number(res.result.total);
      this.subheadingList[0].count = this.total;
    },
    // 正在采购和采购完成切换
    toPage(index) {
      sessionStorage.setItem("upClick", index);
      this.upClick = sessionStorage.getItem("upClick");
      this.getPurchasingList(index);
    },
    // 编辑
    editPurchase(index, type) {
      let publishId = this.tableData[index].id;
      this.hideBtn(this.tableData[index]);
      console.log(publishId);

      this.$router.push({
        path: "./publish_purchase",
        query: { publishId, type },
      });
    },

    // 点击查看
    check() {
      this.$router.push("./publish_purchase");
    },

    showBtn(item) {
      item.show = true;
    },
    hideBtn(item) {
      this.$set(item, "show", false);
      // item.show = false;
    },
    // 页面切换
    handleCurrentChange(value) {
      this.pageNo = value;
      this.getPurchasingList();
    },
  },
  activated(){
    this.form.name = "";
    this.pageNo = 1;
    this.getPurchasingList();
  },

  // watch: {
  //   "$route.name"() {
  //     if (this.$route.name == "purchase_list") {
  //       console.log("$route.name", this.$route.name);
  //       this.getPurchasingList();
  //     }
  //   },
  // },
};
</script>

<style lang="less" scoped>
/deep/ .el-divider--horizontal {
  margin: 0;
  background: #efefef;
  border-radius: 1px;
}
// 导航栏表单样式
/deep/ .el-form {
  display: flex;

  .el-form-item__label {
    width: 1rem !important;
    font-size: 0.18rem;
    font-weight: bold;
    color: #333333;
    padding: 0 0.28rem 0 0;
  }
  .el-form-item__content {
    margin-left: 1rem !important;
  }
  .el-input {
    width: 100%;
    .el-input__inner {
      border: 1px solid #000;
    }
    .el-input__inner:focus {
      border: 1px solid #f42551;
    }
  }
  .el-button--default {
    width: 1rem;
    height: 0.4rem;
    line-height: 0.1rem;
    background: #f42551;
    border: none;
    border-radius: 5px;
    font-size: 0.18rem;
    font-weight: bold;
    color: #fff;
    font-family: Microsoft YaHei;
  }
}

// 删除弹窗样式
/deep/.el-dialog {
  margin-top: 2rem !important;
  border-radius: 10px;
  .el-dialog__header {
    border-radius: 10px 10px 0px 0px;
    background: #efefef;
    display: flex;
    justify-content: space-between;
    .el-dialog__title {
      margin-left: 0.3rem;
      font-size: 0.2rem;
      font-weight: bold;
      color: #333333;
    }
  }
  .el-dialog__body {
    text-align: center;
    span {
      font-size: 0.2rem;
      font-weight: 400;
      color: #333333;
    }
  }
  .el-dialog__footer {
    height: 0.7rem;
    padding: 0;
    .dialog-footer {
      width: 100%;
      height: 0.4rem !important;
      display: flex;
      justify-content: center;

      .el-button--default {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #ffffff;
        border: 1px solid #333333;
        border-radius: 5px;
        display: block;
      }
      .el-button--primary {
        width: 2rem;
        height: 0.4rem;
        line-height: 0.1rem;
        background: #f42551;
        border-radius: 5px;
        border: none;
        margin-left: 0.3rem;
        display: block;
      }
    }
  }
}

.bg {
  // 导航栏
  .nav {
    height: 1.8rem;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    padding: 0.2rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: left;
    // 导航栏按钮
    .navButton {
      width: 2.3rem;
      height: 0.4rem;
      background: #f42551;
      border-radius: 5px;
      font-size: 0.16rem;
      font-weight: bold;
      color: #ffffff;
      border: none;
      cursor: pointer;
    }
  }

  // 采购列表
  .list {
    margin-top: 0.2rem;
    background: #ffffff;
    box-shadow: 0px 3px 20px 0px rgba(230, 230, 230, 0.8);
    border-radius: 10px;
    // text-align: left;
    font-family: Microsoft YaHei;
    padding: 0.3rem 0.5rem;
    .title {
      font-size: 0.24rem;
      font-weight: bold;
      color: #333333;
      line-height: 0.3rem;
      margin-bottom: 0.3rem;
      text-align: left;
    }

    .subheading {
      list-style: none;
      display: flex;
      padding-left: 0;
      margin: 0;
      text-align: center;
      li {
        width: 1.8rem;
        height: 0.4rem;
        font-size: 0.2rem;
        font-weight: 400;
        color: #666666;
        line-height: 0.3rem;
        cursor: pointer;
        margin-right: 0.5rem;
      }
      .active {
        color: #333333;
        font-weight: bold;
        border-bottom: 4px solid #f42551;
        border-radius: 1px;
      }
    }
    .line {
      height: 2px;
      background: #efefef;
    }

    .apply_table {
      margin-top: 0.5rem;
      height: 7rem;

      .apply_table_column {
        height: 0.6rem;
        display: flex;
        // padding-left: 0.8rem;
        align-items: center;
        .apply_table_title {
          width: 1.172rem;
          font-size: 0.16rem;
          font-weight: bold;
          color: #333333;
          line-height: 0.3rem;
          text-align: center;
        }
        .apply_table_title:nth-child(1),
        .apply_table_title:last-child {
          width: 2.055rem;
        }
      }
      .result {
        .apply_table_info {
          .apply_info_box {
            display: flex;
            position: relative;
            align-items: center;
            height: 0.6rem;
            .apply_state {
              width: 0.5rem;
              height: 0.3rem;
              background: #d9d9d9;
              font-size: 0.16rem;
              font-weight: 400;
              color: #333333;
              line-height: 0.3rem;
              margin-right: 0.2rem;
            }

            .apply_info_text {
              width: 1.173rem;
              font-size: 0.16rem;
              font-weight: 400;
              color: #333333;
              line-height: 0.3rem;
            }
            .apply_info_text:nth-child(1) {
              width: 2.055rem;
            }

            .apply_info_btn {
              height: 0.3rem;
              flex: 1;
              display: flex;
              justify-content: space-evenly;
              .btn_check,
              .btn_edit {
                background: none;
                border: none;
                font-size: 0.16rem;
                font-weight: bold;
                color: #333333;
                line-height: 0.3rem;
                cursor: pointer;
              }
              .btn_del {
                background: none;
                border: none;
                font-size: 0.16rem;
                font-weight: bold;
                color: #f42551;
                line-height: 0.3rem;
                cursor: pointer;
              }
            }
          }

          .isBlueClass {
            background: #efefef;
            border-radius: 10px;
          }
        }
      }

      .noResult {
        margin-top: 1rem;
        font-size: 0.18rem;
      }
    }

    // 列表页
    /deep/ .el-pagination {
      position: relative;
      top: 0;
      text-align: left;
      // padding-left: 0.3rem;
      display: flex;
    }
  }
}
// 分页样式
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #f42551;
}
</style>